//#region element-ui table 的样式重写
.el-table__fixed::before {
  content: none;
}
// 行选中框单元格的内边距重写
.el-table-column--selection .cell,
.el-table-column--rownumber .cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.el-table-column--tools .cell {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
// 修正表头未满列情况下右侧空白处的样式
.el-table__header-wrapper {
  background-color: var(--theme-primary) !important;
}
// 修正表头未满列情况下右侧占位块的样式，修正并统一表格表头样式
.el-table--border th.el-table__cell.gutter:last-of-type {
  border-bottom-color: var(--theme-primary) !important;
}
.el-table {
  user-select: text;

  // 修正element-ui 的表格头部行高
  th.el-table__cell > .cell {
    line-height: 1.05;
  }
  // 修正element-ui 表头颜色
  th.el-table__cell,
  // 给行号设置样式
  tr .el-table-column--rownumber {
    background-color: var(--theme-primary) !important;
    color: var(--theme-white);
  }

  td.el-table__cell {
    border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.2);
  }
  // th.el-table__cell.is-leaf,
  tr .el-table-column--rownumber {
    border-bottom: 1px solid var(--theme-white);
  }
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 3px solid var(--theme-danger);
  }

  // 修正element-ui 的表格内容的行高
  .cell {
    line-height: 1.2;
  }

  .el-link {
    font-size: 13px;
    margin: 0.25em 0.35em;
  }

  .el-table-column--rownumber .cell {
    transition: all 0.2s;
    transform: scale(1);
  }
  // 当鼠标移动到行的时候，行号自动放大一些
  .hover-row .el-table-column--rownumber .cell {
    transform: scale(1.8);
  }
}

.el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid rgba(var(--theme-primary-rgb), 0.2);
}
.el-table--border th.el-table__cell {
  border-right: 1px solid var(--theme-white);
}
// 斑马纹表格条纹的颜色
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: rgba(var(--theme-primary-rgb), 0.05);
}

// el-table-column--rownumber
// 鼠标移动到表格行之后的样式
.el-table__body tr.hover-row.current-row > td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
.el-table__body tr.hover-row > td.el-table__cell {
  background: rgba(var(--theme-primary-rgb), 0.2);
}
// 表格宽度调整线的颜色
.el-table__column-resize-proxy {
  border-left-color: var(--theme-warning);
}
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell,
.el-table__body tr.current-row > td.el-table__cell {
  background: rgba(var(--theme-primary-rgb), 0.2);
}
//#endregion

//#region 表单样式优化，优化部分输入框样式
// #region 输入框样式调整
// 扩展按钮的样式调整
.el-input-group__append,
.el-input-group__prepend {
  background-color: #fff;
}

// 输入框禁用状态下时，按钮的样式
.el-input.is-disabled {
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: #f5f7fa;
    color: #c0c4cc;
    cursor: not-allowed;
  }
  .el-button {
    cursor: not-allowed;
  }
}
.el-input .el-icon-circle-close.el-input__clear:hover,
.el-input .el-icon-circle-close.el-input__clear {
  color: var(--theme-danger);
}
//优化只读状态下输入框的背景色
.el-input__inner[readonly] {
  background-color: var(--theme-gray-100);
}
//#endregion

.el-tag .el-icon-close {
  transition: all 0.2s;
  &:hover {
    background-color: var(--theme-danger);
    transform: scale(1.15);
  }
}

//#region 数值数据框的样式调整
.el-input-number--small:not(.is-controls-right) {
  .el-input-number__decrease,
  .el-input-number__increase {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    top: 2px;
  }
  .el-input-number__decrease {
    left: 2px;
  }
  .el-input-number__increase {
    right: 2px;
  }

  .el-input__inner {
    padding: 0 32px;
  }
}
//#endregion

//#region 多行文本框的样式调整
.el-textarea__inner {
  resize: none;
  overflow: auto;
}
//#endregion

//#region 下拉选项框的样式控制
.el-select .el-input .el-select__caret.el-icon-circle-close {
  color: var(--theme-danger);
}
//优化只读状态下输入框的背景色
.el-select {
  .el-input:not(.is-disabled) {
    .el-input__inner[readonly] {
      background-color: var(--theme-white);
    }
  }
}

//#endregion

// 修复高度不正确导致 el-from-item 内容高度不正确的问题，保持el-checkbox一致
.el-radio-group,
.el-radio {
  line-height: inherit; // 还原高度继承于父级
}

.el-checkbox,
.el-radio {
  margin-right: 1.25em;
}
//#endregion

//#region Form 组件相关样式的调整
.el-form-item__label {
  padding-right: 0.5rem;
  color: var(--theme-text-secondary);
}
// 必输的输入框的标星样式调整
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
  background-color: var(--theme-danger);
  border-radius: 6px;
}
//#endregion

.el-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.el-card__body {
  padding: 0;
  min-height: 1em;
  overflow: auto;
  flex: 1;
}

.el-card--small {
  align-items: stretch !important;
  .el-card__header {
    display: flex;
    padding: 0 0.8rem;
    font-size: 14.5px;
    height: 40px;
    line-height: 40px;
  }
}

//#region 弹框相关的样式
//#region dialog 的样式重置

:root {
  --theme-dialog-title-bar-color: var(--theme-primary);
  --theme-dialog-title-color: var(--theme-white);
}

.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  left: 50%;
  top: 50%;
  zoom: 1;
  transform: translate(-50%, -50%);

  max-height: calc(100vh - 10px);
  max-width: calc(100vw - 10px);
  background-color: transparent;
}
.el-dialog__header {
  background-color: var(--theme-dialog-title-bar-color);
  border-top-left-radius: var(--theme-radius);
  border-top-right-radius: var(--theme-radius);
  padding: 1rem 1rem 0.5rem;
}
.el-dialog__body {
  background-color: #fff;
  border-top: 2px dashed var(--theme-primary);
  padding: 0;
  flex: 1;
  overflow: auto;
}
.el-dialog__footer {
  background-color: #fff;
  border-top: 1px dashed var(--theme-gray-400);
  padding: 0.5rem 1rem;
  border-bottom-left-radius: var(--theme-radius);
  border-bottom-right-radius: var(--theme-radius);
}
.el-dialog__title {
  color: var(--theme-dialog-title-color);
  font-size: 17px;
}
.el-dialog__headerbtn {
  line-height: 1;
  transition: all 0.2s;
  .el-dialog__close {
    color: var(--theme-light);
  }
  &:focus,
  &:hover {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: var(--theme-radius);
    transform: rotate(180deg);
    .el-dialog__close {
      color: var(--theme-danger);
    }
  }
}
//#endregion
//#region notification 的样式重置
.el-notification__closeBtn {
  line-height: 1;
  transition: all 0.2s;

  &:focus,
  &:hover {
    transform: rotate(180deg);
    color: var(--theme-danger);
  }
}
// 实验性，需要更多测试
.el-notification {
  padding-right: 0;
  border-radius: var(--theme-radius);

  .el-icon-error::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--theme-radius);
    background-color: currentColor;
  }
}
.el-notification__title {
  margin-right: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.el-notification__group {
  margin-right: 0;
  overflow: hidden;
  flex: 1;
}
.el-notification__content {
  white-space: pre; // 识别 \r\n 的换行
  max-height: 250px;
  min-height: 50px;
  overflow: auto;
  padding-right: 0.5rem;
  user-select: text;
  box-sizing: border-box;
  text-align: left;
}
//#endregion
//#region message：消息框的样式优化
.el-message {
  box-shadow: $box-shadow; // 使用bootstrap 的样式
}
.el-message-box__header {
  padding: 1rem 1rem 0.5rem;
}
.el-message-box__headerbtn {
  line-height: 1;
  .el-message-box__close {
    transition: all 0.2s;
  }

  &:focus .el-message-box__close,
  &:hover .el-message-box__close {
    transform: rotate(180deg);
    color: var(--theme-danger);
  }
}
.el-message-box__btns {
  flex-direction: row-reverse;
  display: flex;
  padding-right: 10px;
  > .el-button {
    margin: 0 0.5em !important;
  }
}
// this.$message 弹窗时候的控制
.el-message__closeBtn {
  line-height: 1;
  transition: all 0.2s;
  &:hover {
    // transform: rotate(180deg); //TODO: 动画冲突，自带属性：translateY(-50%)
    color: var(--theme-danger);
  }
}
.el-message-box__content {
  max-height: 80vh;
  overflow: auto;
}
// 组件居中时候的样式处理
.el-message-box--center {
  .el-message-box__btns {
    justify-content: center;
  }
}

//#endregion
//#region alert：提示框的样式优化
.el-alert__closebtn {
  line-height: 1;
  transition: all 0.2s;
  &:focus,
  &:hover {
    transform: rotate(180deg);
    color: var(--theme-danger) !important;
  }
}
//#endregion
//#region drawer：侧边栏头部样式优化
.el-drawer__header {
  border-bottom: 1px dashed var(--theme-gray-400);
  margin-bottom: 0;
  padding: 0.75rem 1rem 0.5rem;

  .el-drawer__close-btn {
    > .el-icon-close {
      transition: all 0.2s;
    }
    &:hover > .el-icon-close {
      transform: rotate(180deg);
      color: var(--theme-danger);
    }
  }
}
//#endregion
//#endregion

//#region avatar：头像样式优化
.el-avatar {
  width: 2em;
  height: 2em;
  line-height: 2em;
  font-size: calc(var(--size, 40px) / 2);
}
//#endregion

//#region divider：字体颜色优化
.el-divider__text {
  color: var(--theme-gray-600);
}
.el-divider--horizontal {
  background-color: transparent;
  background-image: linear-gradient(
    to right,
    rgba(var(--theme-gray-400-rgb), 0.05),
    rgba(var(--theme-gray-400-rgb), 0.8),
    rgba(var(--theme-gray-400-rgb), 0.05)
  );
}
//#endregion

//#region el-link：样式优化，使用 flex 修复 el-link 中含有图标时对齐问题
.el-link .el-link--inner {
  display: flex;
  align-items: center;
}
//#endregion

//#region loading 样式优化
.el-loading-mask {
  font-size: 36px;
  color: var(--theme-primary);

  .el-loading-spinner {
    margin-top: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 1em;

    i {
      font-size: 1em;
    }
    .el-loading-text {
      font-size: 0.4em;
    }
    i,
    .el-loading-text {
      color: currentColor;
    }

    .circular {
      width: 1em;
      height: 1em;
    }
  }

  //! 扩展的加载样式
  &.ipt-loading {
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 23px;
    border-radius: var(--theme-radius);
    color: var(--theme-pink);

    .el-loading-spinner {
      flex-direction: row;
    }
    .el-loading-text {
      margin-left: 0.25rem;
      font-size: 0.6em;
    }
  }

  &.dark {
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--theme-warning);
  }
}
//#endregion

//#region pagination 修正分页组件成员成员间的margin 属性
.el-pagination,
.el-pagination__editor {
  padding: 0;
}
.el-pagination__total,
.el-pagination__sizes,
.el-pagination__jump,
.el-pagination__editor {
  margin: 0 5px;
}
.el-pagination.is-background {
  .btn-prev,
  .btn-next,
  .el-pager li {
    margin: 0 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }
  .btn-prev:disabled,
  .btn-next:disabled {
    background-color: #f0f0f2;
    box-shadow: none;
  }
}

.el-pagination {
  .btn-prev .el-icon,
  .btn-next .el-icon {
    width: auto;
  }
}

//#endregion
.el-descriptions-item__label {
  color: var(--theme-text-secondary);
}

// 重置数字样式
.el-statistic .con .number {
  font-size: inherit;
  padding: 0;
}

// 避免字体未加载时候，出现抖动的情况
[class^="el-icon-"]:not(.el-input__icon),
[class*=" el-icon-"]:not(.el-input__icon) {
  width: 1em;
  height: 1em; // 会影响 select
  line-height: 1;
}

.el-pager li {
  height: 28px !important;
}

//TODO: 需要多观察情况
//#region el-button
//!由于几乎给所有的图标都设定了1em 的宽高，所以这里的对齐方式直接与元素底部对齐，后续观察是否有不正常的情况进行修正
.el-button {
  [class^="el-icon-"],
  [class*=" el-icon-"],
  .ju-icon {
    // 当在按钮内时使用text-bottom 还是会出现错位的现象，所以此处还是保留bottom，猜想一般是在仅有普标的情况下才会发生
    vertical-align: bottom;
  }
  &:focus:not(.el-button--text) {
    outline: 4px solid rgba(var(--theme-primary-rgb), 0.5);
  }
}
.el-button--primary {
  // 变量化
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}
// 扩展的按钮样式
.el-button--icon {
  border: none;
  display: inline-flex;
  padding: 9px;
  align-items: center;
  justify-content: center;
  // vertical-align: text-bottom; // 一般情况下与文字齐平
}

//#endregion

.el-collapse-item__header,
.el-collapse-item__wrap {
  background-color: var(--theme-white);
  transition: all 0.2s;
}
.el-collapse-item__content {
  padding: 0.25rem 0.25rem 0;
}

.el-collapse-item:hover {
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    background-color: rgba(var(--theme-primary-rgb), 0.02);
  }
}
